<template>
  <div class="sneaker-mall">
    <!-- 顶部 -->
    <new-header type="search" :sneakerType="1"></new-header>
    <!-- 轮播图片太大盖住了按钮 -->
    <!-- <div :style='{height:flashHeight}'> -->
    <div>
      <swiper :options="hfOption" v-if="list&&list.length>0" class="homeflash">
        <swiper-slide v-for="(item,index) in list" :key="index">
          <div @click="goto(item)" class="flash flex-center">
            <img v-lazy="https(item.url)" :alt="item.title" ref="imgs" class="slideImg">
          </div>
        </swiper-slide>
        <div class="swiper-scrollbar bar" slot="scrollbar"></div>
      </swiper>
    </div>
    <!-- 宫格 -->
    <v-delay :delay="300" class="flex-aic flex-wrap tofu-plate">
      <div class="gg-list" v-for="(item, index) in enters" :key="'enters'+index">
        <div class="flex-aic flex-wrap">
          <img
            v-lazy="https(items.bottompic)"
            v-for="(items, indx) in item.gridlist"
            :key="'enters'+indx"
            :style="{width:items.percent+'%'}"
            @click.stop="adGg(items)"
          >
        </div>
      </div>
    </v-delay>
    <!-- 品牌logo -->
    <v-delay :delay="500">
      <swiper :options="BrandOpt" ref="BrandSwiper" class="brandlogo">
        <swiper-slide v-for="(item,inx) in logoData" :key="inx" class="flex-center">
          <div
            class="flash logo"
            :class="{'active':currentLogoIndex==inx}"
            @click.stop="clickLogo(inx)"
          >
            <img v-lazy="https(currentLogoIndex==inx?item.checkedbrandimgurl:item.brandimgurl)" alt>
            <!-- <img src="http://files.eyee.com/Shop/system/main/4ef846d28a564b2e8f0a0a49eb2211e2.png" alt=""> -->
            <i v-if="currentLogoIndex==inx"></i>
          </div>
        </swiper-slide>
      </swiper>
      <!-- 品牌展示 -->
      <!-- <div> -->
      <swiper :options="BrandList" ref="BrandListSwiper">
        <swiper-slide v-for="(item,ix) in logoData" :key="ix">
          <div class="flash flex-aic BrandList-img flex-wrap">
            <div class="img" v-for="(items,indx) in hotseries" :key="indx" v-if="indx<7">
              <img v-lazy="https(items.imgurl)" alt @click.stop="search(items)">
            </div>
            <div
              class="img"
              @click.stop="moreCategory"
              v-if="item.morepicture&&currentLogoIndex==ix"
            >
              <img v-lazy="https(item.morepicture)" alt>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <!-- </div> -->
    </v-delay>
    <!-- 预制位 -->
    <v-delay :delay="800" class="Prefabricated" @click.stop="loadApp">
      <img src="/static/imgs/search/loadApp.png" alt>
    </v-delay>
    <!-- 推荐商品 -->
    <v-delay :delay="1000">
      <v-list
        :load-handle="()=>{}"
        :more-handle="searchloadmore"
        :more-handling="loading"
        :isend="isend"
        v-if="RecommendProductList.length>0"
      >
        <div class="plist-dbl flex-wrap rcd-list">
          <template v-for="(pi,a) in RecommendProductList">
            <product-unit :key="a" :product-item="pi" :product-type="20" :is-find-sim="1"></product-unit>
          </template>
        </div>
      </v-list>
    </v-delay>
  </div>
</template>
<script>
import NewHeader from "@/comps/NewHeader";
import { RecommendProduct } from "@/utils/api/mall";
import { IndexRecommend } from "../../common/api/sneaker";
import { NewSneakerBrandList, BannerPicList } from "@/utils/api/sneaker";
import { CarouselLinkType, GridLinkType } from "@/utils/enum";
import ProductUnit from "@/components/templates/ProductUnit";
export default {
  components: { NewHeader, ProductUnit },
  data() {
    return {
      currentLogoIndex: 0,
      RecommendProductList: [],
      isend: false,
      pageindex: 1,
      loading: false,
      hfOption: {
        autoplay: 2200,
        autoplayDisableOnInteraction: false,
        roundLengths: true,
        updateOnImagesReady: true,
        scrollbar: ".swiper-scrollbar",
        scrollbarHide: false
      },
      BrandOpt: {
        roundLengths: true,
        scrollbarHide: true,
        spaceBetween: 15,
        slidesPerView: 6.5,
        // onInit: this.slideChange,
        onSlideChangeEnd: this.tabChange
      },
      BrandList: {
        roundLengths: true,
        scrollbarHide: true,
        spaceBetween: 10,
        slidesPerView: 1,
        // onInit: this.slideChange,
        onSlideChangeEnd: this.brChange
      },
      logoData: [],
      list: [],
      enters: []
    };
  },
  computed: {
    hotseries() {
      //   console.log('this.logoData',this.logoData)
      return this.logoData[this.currentLogoIndex].hotseries;
    }
  },
  mounted() {
    this.goFlash();
    this.brandLogo();
    this.getRecommend();
  },
  methods: {
    goFlash() {
      let _ = this;
      BannerPicList()
        .then(res => {
          if (res && res.banners) {
            _.list = res.banners;
            _.initShare({
              info: {
                title: res.share.title,
                desc: res.share.content,
                img: res.share.icon,
                url: res.share.url
              }
            });
          }
          _.enters = res.grids || [];
        })
        .catch(e => {
          console.error(e);
        });
    },
    brandLogo() {
      let _ = this;
      NewSneakerBrandList()
        .then(res => {
          console.log("品牌接口数据", res);
          if (res && res.brands && res.brands.length > 0) {
            _.logoData = res.brands;
            //  _.hotseries = _.logoData[0].hotseries
            console.log("hotseries", _.hotseries);
          }
        })
        .catch(e => {
          console.error(e);
        });
    },
    search(item) {
      // console.log('hotseries',item)
      this.$router.push(
        `/results/${item.seriesname}?seriesid=${item.seriesid}&isc2c=1`
      );
    },
    brChange(swiper) {
      this.currentLogoIndex = swiper.activeIndex;
      this.$refs.BrandSwiper.swiper.slideTo(swiper.activeIndex);
      // this.hotseries = this.logoData[this.currentLogoIndex].hotseries
    },
    tabChange(swiper) {
      this.currentLogoIndex = swiper.activeIndex;
      this.slidTo(swiper.activeIndex);
    },
    slidTo(index) {
      this.$refs.BrandListSwiper.swiper.slideTo(index);
    },
    clickLogo(index) {
      // console.log('index',index)
      this.currentLogoIndex = index;
      // this.hotseries = this.logoData[index].hotseries
      this.$refs.BrandListSwiper.swiper.slideTo(index);
    },
    searchloadmore() {
      let _ = this;
      if (_.loading) return;
      if (_.isend) _.toast("已无更多");
      else {
        _.pageindex++;
        _.getRecommend();
      }
    },
    adGg(item) {
      //  console.log('path---------',item)
      /**
       * 首页宫格跳转类型
      //
      // "showtype":#"0:常规商品卡片,1助力砍价、2拼团、3新品预售、 4 B2C 品牌， 5 C2C品牌、6 店铺、7 平台大促、8 自定义专题、9 天天抽奖、10 限量发售、
      // 11 球鞋入口、12 分类、 13系列、
      // 14在线鉴定，15拉新抢购，16  supreme类目，17 supreme，18 B2C产品详情 ,19 C2C 产品详情，20 鬼市，21 球鞋榜，22 球鞋搜索，23 领券中心 24c2c 服饰25.B2C搜索，26.全站搜索
       */
      // helpBargain: 1,
      // groupBuy: 2,
      // newSale: 3,
      // brandSearch: 4,
      // brandSearchC2c: 5,
      // shopDetail: 6,
      // platformActivity:7,
      // activity: 8,
      // sneakerLottery: 9,
      // limitSale: 10,
      // sneakerEnter:11,
      // classify:12,
      // seriesList:13,
      // onlineIdentification:14,
      // PullTheNew :15,
      // Supreme:16,
      // SupremeSearch:17,
      // DetailB2c:18,
      // DetailC2c:19,
      // SpecialSaleDetail:20,
      // SneakersHotSale:21,
      // sneakerSearch:22,
      // getCouponCenter:23
      // costume: 24,
      //   b2cSearch:25,
      // allSearch:26

      let _ = this,
        path = "";
      let link = item.link;
      let contentname = item.contentname;
      let loadapp = false;
      // 类型为4.品牌、5.店铺、6.平台大促 contentid不为null
      switch (item.type) {
        case GridLinkType.helpBargain:
          path = "/helpbargain";
          break;
        case GridLinkType.groupBuy:
          path = "/groupbuy/list";
          break;
        case GridLinkType.newSale:
          path = "/sneaker/presale";
          break;
        case GridLinkType.brandSearch:
          if (item.goCate == 1) path = "/mall/BrandRec";
          else path = "/results/" + encodeURIComponent(contentname);
          break;
        case GridLinkType.brandSearchC2c:
          if (item.goCate == 1) path = "/mall/BrandRec";
          else
            path = "/results/" + encodeURIComponent(contentname) + "?isc2c =1";

          break;
        case GridLinkType.shopDetail:
          if (item.goCate == 1) path = "/mall/ShopRec";
          else path = "/shop/shopdetail/" + link;

          break;
        case GridLinkType.platformActivity:
          path = "/platformActivity/" + link;
          break;
        case GridLinkType.activity:
          if (item.url) path = item.url;
          if (/.*?m.eyee\.com\/active\//i.test(link))
            path = "/active/" + link.split("/active/")[1];
          else if (/.*?eyee\.com\//i.test(link))
            path = link.replace(/.*?eyee\.com/i, "");

          break;
        case GridLinkType.sneakerLottery:
          path = "/drawLottery/lottery";
          break;
        case GridLinkType.limitSale:
          path = "/limit";
          break;
        case GridLinkType.sneakerEnter:
          path = "/sneaker/mall";
          break;
        case GridLinkType.classify:
          if (item.goCate == 1) path = "/category";
          else
            path =
              "/results/" +
              encodeURIComponent(contentname) +
              "?categoryid=" +
              link;
          break;
        case GridLinkType.seriesList:
          if (item.goCate == 1) path = "/category";
          else
            path =
              "/results/" +
              encodeURIComponent(contentname) +
              "?seriesid=" +
              link;

          break;
        case GridLinkType.onlineIdentification:
          loadapp = true;
          break;
        case GridLinkType.PullTheNew:
          loadapp = true;
          break;
        case GridLinkType.Supreme:
          if (item.goCate == 1) path = "/sales/sale/" + (link || "");
          else path = `/salesList/${contentname}/${link}`;
          break;
        case GridLinkType.SupremeSearch:
          if (item.goCate == 1) path = "/sales/sale/" + (link || "");
          else path = "/sales/category/" + (link || "");
          break;
        case GridLinkType.DetailB2c:
          path = `/productDetail/${link}`;
          break;
        case GridLinkType.DetailC2c:
          path = `/sneaker/detail/${link}`;
          break;
        case GridLinkType.SpecialSaleDetail:
          path = `/GhostProList?id=${link}`;
          break;
        case GridLinkType.SneakersHotSale:
          path = `/sneakerHotSale/${link}`;
          break;
        case GridLinkType.sneakerSearch:
          path =
            "/results/" + encodeURIComponent(contentname || link) + "?isc2c =1";
          break;
        case GridLinkType.getCouponCenter:
          path = `/coupon`;
          break;
        case GridLinkType.costume:
          path = `/c2c/CategoryMall`;
          break;
        case GridLinkType.b2cSearch:
          path = "/results/" + encodeURIComponent(contentname) + "?isc2c=0";
          break;
        case GridLinkType.allSearch:
          path = "/results/" + encodeURIComponent(contentname);
          break;
        case 199: //app发售日历
          loadapp = true;
          break;
      }
      if (loadapp) {
        _.openAppClient();
      } else {
        if (path) _.$router.push(path);
        else window.location.href = link;
      }
    },
    goto({ type, articletype, link: data, channel, contentname }) {
      console.log("goto", type, articletype, data, channel);
      /**
        0.店铺 1.品牌 2.分类 3.产品详情 4.资讯详情 5.资讯搜索 6.自定义专题 7.鬼市 9.限量 10.品牌库 11.球鞋榜 12.平台大促 13.球鞋搜索, 14.C2C球鞋 15.C2C服饰,16.B2C搜索，17.全站搜索
        shopDetail: 0,
        brandSearch: 1,
        categorySearch: 2,
        productDetail: 3,
        newsDetail: 4,
        newsSearch: 5,
        activity: 6,
        specialSaleDetail: 7,
        // shopList: 8,
        limitSale: 9,
        brandLib: 10,
        newsShoes: 11,
        platformActivity: 12,
        sneakerSearch: 13,
        sneakerMall: 14,
        costume: 15,
        b2cSearch:16,
        allSearch:17
       */
      let _ = this,
        url = "";
      contentname = contentname || "''";
      switch (type) {
        case CarouselLinkType.shopDetail:
          url = "/shop/shopdetail/" + data;
          break;
        case CarouselLinkType.brandSearch:
          url =
            "/results/" +
            encodeURIComponent(contentname) +
            "?brandid=" +
            data +
            (channel == 2 ? "&isc2c =1" : "");
          break;
        case CarouselLinkType.categorySearch:
          url =
            "/results/" +
            encodeURIComponent(contentname) +
            "?categoryid=" +
            data;
          break;
        case CarouselLinkType.productDetail:
          url = (channel == 2 ? "/sneaker/detail/" : "/productDetail/") + data;
          break;
        case CarouselLinkType.newsDetail:
          url = "/news/detail/" + data;
          break;
        case CarouselLinkType.newsSearch:
          url = "/news/search/" + data;
          break;
        case CarouselLinkType.activity:
          if (/.*?m.eyee\.com\/active\//i.test(data))
            url = "/active/" + data.split("/active/")[1];
          else if (/.*?m.eyee\.com\//i.test(data))
            url = data.replace(/.*?m.eyee\.com/i, "");
          break;
        case CarouselLinkType.specialSaleDetail:
          url = "/GhostProList?id=" + data;
          break;
        case CarouselLinkType.limitSale:
          url = "/limit";
          break;
        case CarouselLinkType.brandLib:
          url = "/brand";
          break;
        case CarouselLinkType.newsShoes:
          url = "/shoe";
          break;
        case CarouselLinkType.platformActivity:
          url = "/platformActivity/" + data;
          break;
        case CarouselLinkType.sneakerSearch:
          url = "/results/" + encodeURIComponent(data) + "?isc2c=1";
          break;
        case CarouselLinkType.sneakerMall:
          url = "";
          break;
        case CarouselLinkType.costume:
          url = "/c2c/CategoryMall";
          break;
        case CarouselLinkType.b2cSearch:
          url = "/results/" + encodeURIComponent(data) + "?isc2c=0";
          break;
        case CarouselLinkType.allSearch:
          url = "/results/" + encodeURIComponent(data);
          break;
      }
      if (url) _.$router.push(url);
      else window.location.href = data;
    },
    moreCategory() {
      this.$router.push("/category");
    },
    loadApp() {
      this.openAppClient();
    },
    getRecommend() {
      let _ = this,
        page = _.pageindex;
      _.loading = true;
      IndexRecommend({ page, size: 20 })
        .then(res => {
          if (res && res.list && res.list.length) {
            if (page === 1) _.RecommendProductList = res.list;
            else
              _.RecommendProductList = _.RecommendProductList.concat(res.list);
            if (_.RecommendProductList.length > 0) {
              _.RecommendProductList = _.RecommendProductList.map(i => {
                // i.brandname = ''
                i.id = i.productid;
                i.isc2c = 1;
                i.name = i.productname;
                i.mainpic = i.imageurl + "|";
                i.producttype = 0;
                i.saleprice = i.price;
                i.specialprice = 0;
                i.soldout = false;
                i.sumcount = 0;
                i.discountoff = 0;
                // i.paynumber = i.paynumber
                return i;
              });
            }

            // console.log('===========================>RecommendProductList',_.RecommendProductList)
            _.isend =
              res.page * res.size >= res.total &&
              _.RecommendProductList.length > 0;
          } else _.isend = true;
          _.loading = false;
        })
        .catch(e => {
          _.loading = false;
          _.toast(e && e.msg ? e.msg : "error:" + e);
        });
    }
  }
};
</script>
<style scoped>
.plist-dbl {
  padding: 1.5%;
  background: #f2f2f2;
}
.plist-dbl .productItem {
  width: 49%;
  margin-bottom: 2%;
}
.plist-dbl .productItem:nth-child(even) {
  margin-left: 2%;
}
.sneaker-mall {
  background: #f2f2f2;
}
.BrandList-img {
  padding: 1.5%;
  padding-bottom: 0;
}
.BrandList-img .img {
  width: 49%;
  background: #fff;
  margin-bottom: 1.8%;
}

.BrandList-img .img:nth-child(even) {
  margin-left: 1.8%;
}
.brandlogo {
  background: #fff;
}
.swiper-slide {
  /* overflow: hidden; */
}
.swiper-slide .logo {
  position: relative;
}
.swiper-slide:nth-child(1) .logo img {
  margin-top: 1.725vw;
}
.swiper-slide:nth-child(1) .logo.active i {
  bottom: -2px;
}
.swiper-slide .logo.active i {
  width: 23px;
  height: 3px;
  background: #8050ff;
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border-radius: 1.5px;
}
.swiper-slide .logo img {
  display: block;
  transition: all 0.3s linear;
}
.swiper-slide .logo.active img {
}
.Prefabricated {
  padding: 0 1.5%;
}
</style>

